/**
 * Created by 123 on 2017/12/7.
 * 三方单位视图
 */

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  Picker,
  TextInput,
} from 'react-native';
import {DatePicker, List, TextareaItem} from 'antd-mobile';
import {Actions} from 'react-native-router-flux'
import HorizontalBody from './HorizontalBody';
const imgDefault = require('../../assets/imgs/img_default.png');
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

import ImagePicker from 'react-native-image-picker'

let options = {
  title: 'Select Avatar',
  customButtons: [
    {name: 'fb', title: 'Choose Photo from Facebook'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};

//现场拍照组件
import UIPhoto from '../../routes/Photograph';
import Colors from '../../assets/colors';

export default class CropView extends React.Component {
  showPicker(addPictures){
    ImagePicker.launchImageLibrary(options, (response)  => {
      addPictures({type: 'allImgs', uri: response.uri, name: 'test.jpg',
        photoAction: 'RectifyBill'})
    });
  }
  render() {
    const {text,type, data, fun, typeId, handleResult, seriousGrade, liveImages,addPictures}=this.props;
    const {name, checkPlace, troubleSelecton,trouble, rectifyTime, rectifyContent, importLevel, conductResult} = data;
    const {
      setSupervisorImgs, setCheckPlace, setTroubles, setCurrentImg, changeImportLevel, changeConductResult,
      setRectifyTime, setRectifyContent, setCorpImgs, setWhereTroubles,change,addOneItem,clearThisItem
    } = fun;
    let where = 'allImgs';
      let date  = new Date();
      let minDate = new Date((date.getFullYear()-5)+'-01-01');
      let maxDate = new Date((date.getFullYear()+10)+'-01-01');
    return (
      <View style={styles.container}>
        {/*<Text style={styles.horizontalText}>{type}</Text>*/}
        {/*<HorizontalBody name="公司名称">*/}
          {/*<Text style={styles.contentStyle}>{name}</Text>*/}
        {/*</HorizontalBody>*/}
        <View style={styles.lineStyle}/>
        <HorizontalBody name="检查部位">
          <View style={styles.contentInput}>
            <TextareaItem
              onChangeText={(text) => {setCheckPlace({data:text,typeId:typeId})}}
              value={checkPlace}
              autoHeight
            />
          </View>

        </HorizontalBody>
        <View style={styles.lineStyle}/>
        <HorizontalBody name="发现问题">
          <View style={{display:'flex',flexDirection:'row',backgroundColor:Colors.white}}>

            <View style={{flex:1}}>
              {
                  troubleSelecton.map((value, index) => (
                  <View style={{flex:1,flexDirection:'row',justifyItems:'center',alignItems:'center'}}>
                    <Text style={{backgroundColor:'red',alignItems:'center',width:15,height:15,paddingLeft:4,color:'white',
                                  justifyItems:'center',marginLeft:5,marginRight:5,borderRadius:20,fontSize:11}}
                          onPress={()=>{clearThisItem(value.id,typeId)}}>X</Text>
                    <TextInput  style={{flex:10}}
                                key={index} value={value.content} multiline={true}
                               placeholder={value.content ===''?'请在此填写您要添加的内容...':''}
                               onChangeText={(val) => change(troubleSelecton,val,index,typeId)} />
                  </View>
                ))
              }
            </View>

            <View style={styles.BtnLocal}>
              <Text style={{paddingLeft:10,paddingRight:10,paddingTop:5,paddingBottom:5,marginBottom:5,
                            borderRadius:5,backgroundColor:Colors.btnPrimaryBg,color:'white',textAlign:'center'}}
                    onPress={()=> {setWhereTroubles(typeId)
                                    Actions.push('TroubleCollection')}}>问题集</Text>
              <Text style={styles.addedItem}
                    onPress={()=> {addOneItem(typeId)}}>增加一项</Text>
            </View>

          </View>
        </HorizontalBody>
        <View style={styles.lineStyle}/>
        <HorizontalBody name="现场照片">
          <View style={{display:'flex',flexDirection:'column'}}>
            <Text　style={{fontSize:18}} onPress={() =>{this.showPicker(addPictures)}}>+上传</Text>
            <UIPhoto photoType={where} photoAction='RectifyBill'/>
          </View>

        </HorizontalBody>
        <View style={styles.lineStyle}/>
        <HorizontalBody name="严重等级">
          <View style={{display:'flex',flexDirection:'row',backgroundColor:Colors.white}}>
            <Picker
              onValueChange={(val)=>{changeImportLevel({data:val,typeId:typeId})}}

              selectedValue={importLevel}
              style={{width:200,height:50}}
            >
              {
                seriousGrade.map((val, index) => (
                  <Picker.Item key={index} label={val.label} value={val.label}/>
                ))
              }

            </Picker>
          </View>
        </HorizontalBody>
        <View style={styles.lineStyle}/>
        <HorizontalBody name="处理结果">
          <View style={{display:'flex',flexDirection:'row',backgroundColor:Colors.white}}>
            <Picker
              onValueChange={(val)=>{changeConductResult({data:val,typeId:typeId})}}
              
              selectedValue={conductResult}
              style={{width:200,height:50}}
            >
              {
                handleResult.map((val, index) => (
                  <Picker.Item key={index} label={val.label} value={val.label}/>
                ))
              }

            </Picker>
          </View>
        </HorizontalBody>
        <View style={styles.lineStyle}/>
        <HorizontalBody name="整改时间">
          <View style={{flex:1,backgroundColor:Colors.white}}>
            <DatePicker
              mode="date"
              title="选择日期"
              extra="选择日期"
              minDate={minDate}
              maxDate={maxDate}
              value={rectifyTime === ''?new Date():rectifyTime}
              onChange={date => setRectifyTime({data:date,typeId:typeId})}
            >
              <List.Item arrow="horizontal" style={{height:50}}/>
            </DatePicker>
          </View>
        </HorizontalBody>
        <View style={styles.lineStyle}/>
        <HorizontalBody name="整改要求">
          <View style={styles.contentInput}>
            <TextareaItem
              onChangeText={(text) => {setRectifyContent({data:text,typeId:typeId})}}
              value={rectifyContent}
              autoHeight
            />
          </View>
        </HorizontalBody>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.contentContainerBg,
    display: 'flex',
    flexDirection: 'column'
  },
  nameStyle: {
    backgroundColor: Colors.contentContainerBg,
    width: 100
  },
  contentStyle: {
    backgroundColor: Colors.white,
    flex: 1,
    paddingTop: 17,
  },
  imgStyle: {
    width: 100,
    height: 100,
  },
  contentInput: {
    backgroundColor: Colors.white,
    flex: 1,
  },
  horizontalText: {
    backgroundColor: Colors.btnPrimaryBg,
    height: 50,
    paddingTop: 10,
    color: Colors.contentContainerBg,
    textAlign: 'center',
    fontSize: 20,
  },
  lineStyle: {
    height: 1,
    backgroundColor: Colors.backgroundLightGray
  },
  BtnLocal: {
    backgroundColor: Colors.white,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: 5,
  },
  addedItem:
    { paddingLeft:10,
      paddingRight:10,
      paddingTop:5,
      paddingBottom:5,
      marginBottom:5,
      borderRadius:5,
      backgroundColor:Colors.btnPrimaryBg,
      color:'white',textAlign:'center'}
});